$(function() {
    //隐藏菜品,显示添加菜品模块
    // $('.addCate').on('click', function() {
    //     $('.disher-body').hide()
    //     $('#form-add').show()
    // })
    // $('.btnReset').on('click', function() {
    //         $('.disher-body').show()
    //         $('#form-add').hide()
    //     })
    // $('.addCate').on('click', function() {
    //         let index = layui.layer.open({
    //                 type: 1,
    //                 title: ['新增菜品分类', 'font-weight:700;font-size:18px;padding-top:10px;padding-bottom:50px;margin-bottom:30px'],
    //                 area: ['1500px', '1680px'],
    //                 //把模板标签的内容，作为弹出层的内容
    //                 //content: $('#food-add').html()
    //                 content: $('#tpl-form').html()

    //             })
    //             // layer.iframeAuto(index);
    //         layui.use('form', function() { //此段代码必不可少
    //             var form = layui.form;
    //             form.render();
    //         });
    //         //关闭弹出层
    //         $('.btnReset').on('click', function() {
    //                 layui.layer.close(index)
    //             })
    //             //弹出添加口味

    //     })
    // 123
    //     $('.addKW').on('click', function() {
    //         $(this).hide()
    //         $('.flavor').show()
    //     })
    //     let num = 0
    //     $('.addkouwei').on('click', function() {
    //         num++
    //         let htmlStr = `
    //     <div class="kouwei" style="display: flex; margin-top: 20px; data-id="${num}"">
    //     <div class="taste">忌口</div>
    //     <div class="taste1"></div>
    //     <a href="javascript:;" class="flavorDel red" >删除</a>
    // </div>
    //     `
    //         $(this).before(htmlStr)
    //             // console.log(num);
    //     })
    $('.flavorBox').on('click', '.flavorDel', function() {
        let index = $(this).attr('data-id')
            // console.log(index);
        $(this).parents('.count').remove()
    })

    layui.use('dropdown', function() {
        var dropdown = layui.dropdown
        dropdown.render({
            elem: '#demo2' //可绑定在任意元素中，此处以上述按钮为例
                ,
            data: [{
                title: '甜味',
                id: 1,
                href: '#'
            }, {
                title: '温度',
                id: 2,
                href: '#'
            }, {
                title: '忌口',
                id: 3,
                href: '#'
            }, {
                title: '辣度',
                id: 4,
                href: '#'
            }, ],
            id: 'demo2'
                //菜单被点击的事件
                ,
            click: function(obj) {
                console.log(obj);
                layer.msg('已添');
                $("#demo2").val(obj.title)

                const res = {
                    "data": {
                        "records": [{
                                "name": "三分甜"
                            },
                            {
                                "name": "五分甜"
                            },
                            {
                                "name": "七分甜"
                            },
                            {
                                "name": "标准糖"
                            },

                        ],
                        "wendu": [{
                                "name": "热饮"
                            },
                            {
                                "name": "常温"
                            },
                            {
                                "name": "去冰"
                            },
                            {
                                "name": "少冰"
                            }
                        ],
                        "jikou": [{
                                "name": "不要葱"
                            },
                            {
                                "name": "不要蒜"
                            },
                            {
                                "name": "不要香菜"
                            },
                            {
                                "name": "不要辣"
                            }
                        ],
                        "ladu": [{
                                "name": "不辣"
                            },
                            {
                                "name": "微辣"
                            },
                            {
                                "name": "中辣"
                            },
                            {
                                "name": "变态辣"
                            }
                        ],

                    },

                }
                const htmlStr = template('xrym', res.data)
                const htmlStr1 = template('xrym1', res.data)
                const htmlStr2 = template('xrym2', res.data)
                const htmlStr3 = template('xrym3', res.data)
                    // console.log(htmlStr);
                if ($("#demo2").val() === "甜味") {
                    $('.my-right').html(htmlStr)
                } else if ($("#demo2").val() === "温度") {
                    $('.my-right').html(htmlStr1)
                } else if ($("#demo2").val() === "忌口") {
                    $('.my-right').html(htmlStr2)
                } else if ($("#demo2").val() === "辣度") {
                    $('.my-right').html(htmlStr3)
                }
                $('.cates').on('click', '.item i', function() {
                    $(this).parents('.item').remove()
                })
            }

        });
    });
    // 点击添加生成新的选择框
    $(".dis_flavor").on("click", '.my-btn', function() {
        //let index = this.attr(data-index)
        // let nextindex = index+1
        let newdiv = `
    <div class="count">
    <div class="layui-inline" style="width: 150px;">
     <input name="" placeholder="请输入口味" class="layui-input" id="demo2">
    </div>
    <input type="text" name="title" required lay-verify="required" autocomplete="off"
     class="layui-input my-right">
     <a href="javascript:;" class="flavorDel red">删除</a>
    </div>`
        $(".new").append(newdiv)
    })
    $("#flavor-btn").on("click", function() {
        $(this).hide()
        $(".dis_flavor").show()
    })

    //渲染菜品列表
    const q = {
        page: 1,
        pageSize: 10,
        cate_id: '',
        state: ''
    }
    render()

    function render() {
        $.ajax({
            url: 'http://121.4.102.44:8083/dish/page',
            data: q,
            success(res) {
                console.log(res);
                let htmlStr = template('tpl', res.data)
                $('tbody').html(htmlStr)
                sorter(res.data.total)
                if (res.status == 1) {
                    $('.btnEdit').html('停售')
                } else if (res.status == 0) {
                    // status = 1
                    $('.btnEdit').html('启售')
                }
            }

        })
    }
    //分页
    function sorter(total) {
        layui.laypage.render({
                //存放盒子的id，没有#
                elem: 'pageBox',
                //数据的总数
                count: total,
                //每页显示的条数
                limit: q.pageSize,
                prev: '<',
                next: '>',
                //当前的页码
                curr: q.page,
                //自定义分页按钮的排版
                layout: ['count', 'limit', 'prev', 'page', 'next', 'skip', ],
                //设置内页显示的条数（下拉列表选项）
                limits: [2, 4, 6, 8, 10],
                jump: function(obj, first) {
                    if (!first) {
                        //do something
                        //修改查询参数q
                        q.page = obj.curr
                            //获取当前内页显示的条数
                        q.pageSize = obj.limit
                            //getArticleList()
                        render()
                    }
                }
            })
            //console.log(q.pagesize);
    }
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    // $(".j-checkbox").change(function() {
    // $('tbody').on('change', '.j-checkbox', function() {
    //     // alert(2)

    // })


    // function tagData(elem) {
    //     var arr = [];
    //     elem.find('.tags-item').each(function() {
    //         if ($(this).is(':visible'))
    //             arr.push($.trim($(this).text()));
    //     });
    //     elem.next().val(arr.toString());
    // }

    // $(document).on('click', '.tags', function() {
    //     $(this).find('.js_inputTags').focus();
    // });

    // $(document).on('focusin', '.js_inputTags', function() {
    //     $(this).parent().css('border-color', '#488ffa')
    // })
    // $(document).on('focusout', '.js_inputTags', function() {
    //     $(this).parent().css('border-color', '#e6e6e6')
    // });

    // $(document).on('keyup', '.js_inputTags', function(e) {
    //     var key = e.keyCode;
    //     if (key == 13) {
    //         if ($(this).val()) {
    //             $(this).before('<span class="tags-item">' + $(this).val() + '<i class="fa fa-close js_rmTag"></i>' +
    //                 '</span>');
    //             $(this).val('');
    //             tagData($(this).parents('.tags'));
    //         }
    //     }
    //     if (key == 8) {
    //         if (!$(this).val())
    //             $(this).prev().remove();
    //         tagData($(this).parents('.tags'));
    //     }
    // });

    $(document).on('click', '.js_rmTag', function() {
            $(this).parent().hide();
            tagData($(this).parents('.tags'));
            $(this).parent().remove();
        })
        // http://121.4.102.44:8083/dish?ids=1397853890262118402
        //修改状态
        // 停售启售
    $('tbody').on('click', '.btnEdit', function() {
            let status = $(this).attr('data-status')
                // status = JSON.parse(status)
            const ids = $(this).attr('data-id')
            if (status == 1) {
                status = 0
                    // $('.btnEdit').html('停售')
            } else if (status == 0) {
                status = 1
                    // $('.btnEdit').html('启售')
            }
            layer.confirm('确认修改状态？', {
                icon: 3,
                title: '提示'
            }, function(index) {

                $.ajax({
                    method: 'post',
                    url: 'http://121.4.102.44:8083/dish/status/' + status + '?ids=' + ids,
                    success(res) {
                        if (res.code != 1) {
                            return layer.msg(res.msg)
                        }
                        // layer.msg(res.msg) 
                        render()

                    }
                })
                layui.layer.close(index);
            })

        })
        //删除数据
    $('tbody').on('click', '.btnDel', function() {
            const id = $(this).attr('data-id')
            let status = $(this).attr('data-status')
            console.log(id);
            layer.confirm('您确定要删除吗？', {
                icon: 3,
                title: '提示'
            }, function(index) {
                if (status == 1) {
                    return layer.msg('请先停售在删除')
                }
                $.ajax({
                    method: 'delete',
                    url: 'http://121.4.102.44:8083/dish/?ids= ' + id,
                    success(res) {
                        if (res.code != 1) {
                            return layer.msg(res.msg)
                        }
                        layer.msg(res.msg)
                        render()
                            // console.log(res);
                    }
                })
                layui.layer.close(index);
            })
        })
        //批量删除
    $('tbody').on('change', '.j-checkbox', function() {
            check()
            let stat = []
            let arr = []
            $('.j-checkbox:checked').each(function(vals, ele) {
                arr.push($(ele).attr('data-id'))
                    // console.log(obj);
                var status = $(ele).attr('data-status')
                stat.push(status)
                $('.batchRemove').on('click', function() {
                    {
                        layer.confirm('您确定要删除吗？', {
                            icon: 3,
                            title: '提示'
                        }, function(index) {
                            if (stat.indexOf('1') !== -1) {
                                return layer.msg('请先停售在删除')
                            } else {
                                $.ajax({
                                    method: 'DELETE',
                                    url: 'http://121.4.102.44:8083/dish/?ids=' + arr.join(','),
                                    success(res) {
                                        if (res.code !== 1) {
                                            return layer.msg('批量删除失败')
                                        }
                                        layer.msg('批量删除成功')
                                        render()
                                    }
                                })
                            }

                            layui.layer.close(index);
                        })

                    }
                })
            })
            console.log(stat);
            // console.log(obj);
        })
        //批量启售
    $('tbody').on('change', '.j-checkbox', function() {
        check()
        let arr = []
        $('.j-checkbox:checked').each(function(vals, ele) {
            arr.push($(ele).attr('data-id'))
            $('.batchEdit').on('click', function() {
                layer.confirm('您确定要批量启售吗？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    $.ajax({
                        method: 'post',
                        url: 'http://121.4.102.44:8083/dish/status/1?ids=' + arr.join(','),
                        success(res) {
                            // console.log(res);
                            if (res.code !== 1) {
                                return layer.msg('批量启售失败')
                            }
                            layer.msg('批量启售成功')
                            if ($('.search').val()) {
                                renderSome()
                            } else {
                                render()
                            }
                        }
                    })
                    layui.layer.close(index);
                })
            })
        })
    })
    check()

    function check() {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    }
    //批量停售
    $('tbody').on('change', '.j-checkbox', function() {
            check()
            let arr = []
            $('.j-checkbox:checked').each(function(vals, ele) {
                arr.push($(ele).attr('data-id'))
                $('.batchEdits').on('click', function() {
                    layer.confirm('您确定要批量停售吗？', {
                        icon: 3,
                        title: '提示'
                    }, function(index) {
                        $.ajax({
                            method: 'post',
                            url: 'http://121.4.102.44:8083/dish/status/0?ids=' + arr.join(','),
                            success(res) {
                                // console.log(res);
                                if (res.code !== 1) {
                                    return layer.msg('批量停售失败')
                                }
                                layer.msg('批量停售成功')
                                render()
                            }
                        })
                        layui.layer.close(index);
                    })

                })
            })
        })
        //回车搜索
    $('.search').keydown(function(e) {
        if (e.keyCode == 13) {
            renderSome()
        }
        // if ($(this).val() == "") {
        //     render()
        // }
    });

    function renderSome() {
        const name = $('.search').val().trim()
        const p = {
            page: 1,
            pageSize: 10,
            cate_id: '',
            state: '',
            name
        }
        $.ajax({
            url: 'http://121.4.102.44:8083/dish/page',
            data: p,
            success(res) {
                const htmlStr = template('tpl', res.data)
                $('tbody').html(htmlStr)
                    // 渲染分页器
                renderPage(res.data.total)
            }
        })
    }
    //获取选取数据id存储到本地
    $('tbody').on('click', '.btnUpdate', function() {
            let id = $(this).attr('data-id')
            localStorage.setItem('IDS', id)
            $(this).parent('.JSa').siblings('.niuma').html();
            localStorage.setItem('catename', $(this).parent('.JSa').siblings('.niuma').html())
        })
        //返回按钮
    $('.btnReset').on('click', function() {
            location.href = '/index.html#/dishes'
            window.location.reload();
        })
        //头部返回
    if (window.location.hash.indexOf('add') > -1 || window.location.hash.indexOf('updateDishes') > -1) {
        document.querySelector(
            ".current-page"
        ).innerHTML = `
     <span class="back"  style="cursor:pointer;font-weight:100;">
      <i class="layui-icon layui-icon-return"></i>
      <span class="return">返回</span>
     </span>
     <span style="padding:0 10px;">|</span>
     <span class="location">${window.location.hash.indexOf('add') > -1 ? '添加菜品' : '修改菜品'}</span>
     `
    }
    $('.return').click(function() {
        location.href = '/index.html#/dishes'
        window.location.reload();
    })
})